<template>
	<div class="tag-container">
		<el-tag v-for="(tag, index) in taglist" 
			:key="tag.id" 
			:closable="tag.name != 'home'" 
			:effect="tag.name === currenttag.name ? 'dark' : 'plain'" 
			@click="changeTag(tag)" 
			@close="closeTag(tag, index)"
			size="medium">
			{{ tag.label }}
		</el-tag>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	name: 'CommonTags',
	computed: {
		...mapState('pannel', ['taglist', 'currenttag'])
	},
	methods: {
		changeTag(tag) {
			this.initTaglist(tag);
			this.$router.replace({ name: tag.name});
		},
		closeTag(tag, index) {
			this.delTagItem({ tag, index });
			this.$router.replace({ name: this.currenttag.name });
		},
		...mapMutations('pannel', ['initTaglist', 'delTagItem'])
	}
}
</script>

<style lang="less" scoped>
	.tag-container {
		flex-shrink: 0;
		padding: 10px 20px 0;
		.el-tag+.el-tag {
			margin-left: 20px;
		}
	}
</style>